<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.7/dist/index.css" />
    <script src="https://unpkg.com/element-plus@2.3.7/dist/index.full.js"></script>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    nav {
        height: 50px;
        background-color: #111; /* 导航栏背景颜色改为深黑色 */
        color: #fff; /* 导航栏文字颜色改为白色 */
        font-size: 16px;
        line-height: 50px;
        padding: 0 20px;
    }

   .content {
        width: calc(100% - 200px);
        height: calc(100vh - 50px);
        border: 2px solid #333; /* 内容区域边框颜色改为深灰色 */
        position: absolute;
        top: 50px;
        right: 0;
        background-color: #222; /* 内容区域背景颜色改为深灰色 */
        color: #fff; /* 内容区域文字颜色改为白色 */
    }

    el-menu {
        width: 200px;
        height: calc(100vh - 50px);
        background-color: #111; /* 侧边栏菜单背景颜色改为深黑色 */
        text-color: #fff;
        active-text-color: #ff6600; /* 侧边栏菜单激活文字颜色改为橙色 */
    }

    el-card {
        background-color: #333; /* 卡片背景颜色改为深灰色 */
        color: #fff; /* 卡片文字颜色改为白色 */
    }
</style>

<body>
    <div id="app">
        <nav>
            <span>后台管理系统</span>
            <span style="float: right;">admin</span>
        </nav>
        <el-menu style="width: 200px; height:calc(100vh - 50px)" default-active='1' background-color='#111'
            text-color="#fff" active-text-color='#ff6600'>
            <el-menu-item index='1'>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index='2'>
                <span>系统管理</span>
            </el-menu-item>
            <el-menu-item index='3'>
                <span>日志管理</span>
            </el-menu-item>
        </el-menu>

        <div class="content">
            <el-card>
                <template #header>
                    <span>用户管理</span>
                    <el-button type='primary' style="float:right;" @click="showAddDialog = true">添加用户</el-button>
                </template>

                <el-input v-model="searchKeyword" placeholder="请输入搜索关键字" style="width: 300px;" @keyup.enter="filterTableData">
                    <template #append>
                        <el-button @click="filterTableData">搜索</el-button>
                    </template>
                </el-input>

                <el-table :data='filteredTableData' style="margin: 20px 0;" border>
                    <el-table-column prop='id' label='id'></el-table-column>
                    <el-table-column prop='name' label='姓名'></el-table-column>
                    <el-table-column prop='email' label='邮箱'></el-table-column>
                    <el-table-column prop='phone' label='电话'></el-table-column>
                    <el-table-column prop='role' label='角色'></el-table-column>
                    <el-table-column prop='status' label='状态'>
                        <template #default='scope'>
                            <el-button @click="toggleStatus(scope.row)" :type="scope.row.status === '启用'? 'uccess' : 'danger'">
                                {{scope.row.status}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label='操作'>
                        <template #default="scope">
                            <el-button @click="showEditDialog = true, form = {...scope.row}, currentIndex = scope.$index" size='small' type='primary'>编辑</el-button>
                            <el-button @click="deleteUser(scope.$index)" size='small' type='danger'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :total='filteredTableData.length' layout="total,prev,pager,next,jumper">
                </el-pagination>
            </el-card>
            <el-dialog v-model='showEditDialog' title="编辑用户" style="width: 500px;">
                <el-form ref="userForm" :rules='rules' :model='form'>
                    <el-form-item label='姓名' prop='name'>
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label='邮箱' prop='email'>
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label='电话' prop='phone'>
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label='角色' prop='role'>
                        <el-select v-model="form.role">
                            <el-option label="查看" value="查看"></el-option>
                            <el-option label="管理" value="管理"></el-option>
                            <el-option label="编辑" value="编辑"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='状态' prop='status'>
                        <el-select v-model="form.status">
                            <el-option label="启用" value="启用"></el-option>
                            <el-option label="禁用" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="showEditDialog = false">取消</el-button>
                    <el-button @click="saveEdit" type='primary'>确定</el-button>
                </template>
            </el-dialog>
            <el-dialog v-model='showAddDialog' title="添加用户" style="width: 500px;">
                <el-form ref="addForm" :rules='addRules' :model='newUser'>
                    <el-form-item label='姓名' prop='name'>
                        <el-input v-model="newUser.name"></el-input>
                    </el-form-item>
                    <el-form-item label='邮箱' prop='email'>
                        <el-input v-model="newUser.email"></el-input>
                    </el-form-item>
                    <el-form-item label='电话' prop='phone'>
                        <el-input v-model="newUser.phone"></el-input>
                    </el-form-item>
                    <el-form-item label='角色' prop='role'>
                        <el-select v-model="newUser.role">
                            <el-option label="查看" value="查看"></el-option>
                            <el-option label="管理" value="管理"></el-option>
                            <el-option label="编辑" value="编辑"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='状态' prop='status'>
                        <el-select v-model="newUser.status">
                            <el-option label="启用" value="启用"></el-option>
                            <el-option label="禁用" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="showAddDialog = false">取消</el-button>
                    <el-button @click="addUser" type='primary'>确定</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    showEditDialog: false,
                    showAddDialog: false,
                    form: {},
                    newUser: {
                        id: null,
                        name: '',
                        email: '',
                        phone: '',
                        role: '管理员',
                        status: '启用'
                    },
                    currentIndex: 0,
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' }
                        ]
                    },
                    addRules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' },
                            { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '姓名只能包含汉字、字母', trigger: 'blur' }
                        ],
                        email: [
                            { required: true, message: '请输入邮箱', trigger: 'blur' },
                            { pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/, message: '邮箱格式不正确', trigger: 'blur' }
                        ],
                        phone: [
                            { required: true, message: '请输入电话', trigger: 'blur' },
                            { pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
                        ],
                        role: [
                            { required: true, message: '请选择角色', trigger: 'change' }
                        ],
                        status: [
                            { required: true, message: '请选择状态', trigger: 'change' }
                        ]
                    },
                    tableData: [
                        {
                            id: 1,
                            name: '张三',
                            email: 'zhangsan@example.com',
                            phone: '13826522323',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 2,
                            name: '李四',
                            email: 'lisi@example.com',
                            phone: '16489563415',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 3,
                            name: '王五',
                            email: 'wangwu@example.com',
                            phone: '19845632545',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 4,
                            name: '老六',
                            email: 'laoliu@example.com',
                            phone: '14523697845',
                            role: '管理员',
                            status: '禁用'
                        },
                        {
                            id: 5,
                            name: '雾七',
                            email: 'wuqi@example.com',
                            phone: '14875321598',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 6,
                            name: '孖八',
                            email:'maba@example.com',
                            phone: '16259846571',
                            role: '管理员',
                            status: '启用'
                        }
                    ],
                    searchKeyword: '',
                    filteredTableData: []
                };
            },
            created() {
                this.sortTableData();
                this.filteredTableData = this.tableData;
            },
            methods: {
                toggleStatus(row) {
                    row.status = row.status === '启用'? '禁用' : '启用';
                },
                deleteUser(index) {
                    this.$confirm('确认删除该用户？是否继续', '提示', {
                        type: 'warning',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.tableData.splice(index, 1);
                        this.sortTableData();
                        this.filterTableData();
                        this.$message.success('删除成功');
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                saveEdit() {
                    this.$refs.userForm.validate((res) => {
                        if (res) {
                            this.tableData[this.currentIndex] = { ...this.form };
                            this.sortTableData();
                            this.filterTableData();
                            this.$message.success('修改成功');
                            this.form = {};
                            this.currentIndex = 0;
                            this.showEditDialog = false;
                        }
                    });
                },
                addUser() {
                    this.$refs.addForm.validate((res) => {
                        if (res) {
                            this.newUser.id = this.tableData.length + 1;
                            this.tableData.push({ ...this.newUser });
                            this.sortTableData();
                            this.filterTableData();
                            this.$message.success('添加成功');
                            this.newUser = {
                                id: null,
                                name: '',
                                email: '',
                                phone: '',
                                role: '管理员',
                                status: '启用'
                            };
                            this.showAddDialog = false;
                        }
                    });
                },
                filterTableData() {
                    if (this.searchKeyword) {
                        this.filteredTableData = this.tableData.filter(item => {
                            const idMatch = item.id.toString().includes(this.searchKeyword);
                            const nameMatch = item.name.includes(this.searchKeyword);
                            const phoneMatch = item.phone.includes(this.searchKeyword);
                            return idMatch || nameMatch || phoneMatch;
                        });
                    } else {
                        this.filteredTableData = this.tableData;
                    }
                },
                sortTableData() {
                    this.tableData.sort((a, b) => a.id - b.id);
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>

</html>